<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
		<script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
		<script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
		<script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
	</head>

	<body>
		<div id="app">
			<!--上传课程-->
			<el-tag type="info" effect="dark" closable="true" :disable-transitions="disable" @close="handleClose">添加课程</el-tag>
			<div v-if="inputVisible">
			<!--表单-->
			<el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="课程名称" prop="courseName">
					<el-input v-model="ruleForm.courseName" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="课程简介" prop="descs">
					<el-input v-model="ruleForm.descs" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="课程类型" prop="courseType">
					<el-select v-model="ruleForm.courseType" placeholder="请选择课程类型">
						<el-option label="JavaEE" value="1"></el-option>
						<el-option label="数据库" value="2"></el-option>
						<el-option label="前端技术" value="3"></el-option>
					</el-select>
				</el-form-item>

				<el-upload style="margin-left: 25px;" :on-remove="handleRemoveImg" :on-exceed="handleExceed" :http-request="myUpload" class="upload-demo" ref="upload1" action="http://localhost/course?method=uploadFile" :limit="1" :auto-upload="false">
					<el-button slot="trigger" size="small" type="primary">选取图片</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload(`upload1`)">上传到服务器</el-button>
				</el-upload>
				<img :src="dialogImageUrl | getUploadName" style="width: 100px;height: 100px;margin-left: 25px;" alt="" />

				<el-upload style="margin-left: 25px;" :on-remove="handleRemoveVideo" :on-exceed="handleExceed" :http-request="myUpload" class="upload-demo" ref="upload2" action="http://localhost/course?method=uploadFile" :limit="1" :auto-upload="false">
					<el-button slot="trigger" size="small" type="primary">选取视频</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload(`upload2`)">上传到服务器</el-button>
				</el-upload>

				<video controls autoplay  muted="muted" style="width: 100px;height: 100px;margin-left: 25px;margin-top: 5px;" :src="dialogVedioUrl|getUploadName"></video>

				<el-form-item label="课程价格" prop="coursePrice">
					<el-input v-model="ruleForm.coursePrice" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="ruleForm.status">
						<el-radio label="0">未上架</el-radio>
						<el-radio label="1">上架</el-radio>
						<el-radio label="2">下架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="margin-left: 20px;">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</div>
			</div>
			<!--结尾-->
		</div>
	</body>
	<script>
		axios.defaults.withCredentials = true
		new Vue({
			el: "#app",
			data: {
				/*校验的字段*/
				ruleForm: {
					courseName: '',
					descs: '',
					courseType: '',
					coursePrice: '',
					status:'',
				},
				/*规则*/
				rules: {
					courseName: [{
						required: true,
						message: '请输入课程名称',
						trigger: 'blur'
					}, ],
					descs: [{
						required: true,
						message: '请选择课程简介',
						trigger: 'blur'
					}],
					courseType: [{
						required: true,
						message: '请选择课程类型',
						trigger: 'change'
					}],
					coursePrice: [{
						required: true,
						message: '请输入课程价格',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请至少选择一个状态',
						trigger: 'change'

					}]
				},
				/*文件上传*/
				dialogImageUrl: '',
				dialogVedioUrl: '',
				/*选项卡*/
				inputVisible: true,
				disable: false,
				
			},
			methods: {
				// 取消
				handleClose() {
				  
				},
				// 限制上传数量
				handleExceed(files, fileList) {
					this.$message.warning(`最多只能上传${files.length}个文件`)
				},
				// 提交 点击上传服务器触发此方法
				submitUpload(value) {
					this.$refs[value].submit();

				},
				// 删除 图片的方法
				handleRemoveImg() {
					 let peasm = this.dialogImageUrl
					 this.dialogImageUrl = "";
					 axios.post("http://localhost/course?method=delUpload&peasm="+peasm)
				},
				 // 删除 视频的方法
				handleRemoveVideo(){
					   let Vedio = this.dialogVedioUrl
					   this.dialogVedioUrl = "";
					   axios.post("http://localhost/course?method=delUpload&peasm="+Vedio)
				},
				// 上传到服务器的方法
				myUpload(content) {
						let peasm = new FormData();
						peasm.append('myflie',content.file);
						// 发起请求携带参数发送过去
					axios.post(content.action,peasm).then(resp=>{
						// 判断该状态码是否为201
							if(resp.data.dece==201){
								this.$message.success(resp.data.message)
								this.dialogImageUrl = resp.data.data
							}
							//该状态码是否为202
							if(resp.data.dece == 202){
								this.$message.success(resp.data.message)
								this.dialogVedioUrl = resp.data.data
							}
							// 判断该状态码是否为500
							if(resp.data.dece==500){
								this.$message.warning(resp.data.message);
							}					
					});
				},
				 // 确定
				submitForm(formName) {
					// 表单校验
					this.$refs[formName].validate(valid=>{
						// 等于true进入
						if(valid){
							let peams = new URLSearchParams();
							for(let i in this.ruleForm){
									peams.append(i,this.ruleForm[i])
							};
							// 还差图片以及视频的
							peams.append("courseImage",this.dialogImageUrl);
							peams.append("courseVideo",this.dialogVedioUrl);
							//发起请求
							axios.post("http://localhost/course?method=add",peams).then(resp=>{
									if(resp.data.dece==200){
										this.$message.success(resp.data.message)
									}else{
										this.$message.warning(resp.data.message)
									}
									setTimeout(() => {
										location.href='index.html'
									},1500);
							});
							
						}else{
							this.$message.warning('表单验证未通过....')
						}
					});
				}
				

			},
			// 过滤器，与method同级别
			filters:{
					getUploadName(val){
						
						return 'http://localhost/picture/'+val;
						
					}
				}
		})
	</script>

</html>